<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>办公系统 - 基础表格</title>
    <meta name="keywords" content="办公系统">
    <meta name="description" content="办公系统">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/select/bootstrap-select.min.css" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>员工管理<small>>修改信息</small></h5>
                </div>
                <div class="ibox-content">
                    <form id="dataForm" method="get" action="#" class="form-horizontal">
                        <input type="hidden" name="eid"/>
                        <input type="hidden" name="username"/>
                        <input type="hidden" name="password"/>
                        <div class="row">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-3">
                                    <input name="ename" type="text" class="form-control input-sm">
                                </div>
                                <label class="col-sm-2 col-sm-offset-1 control-label">性别</label>
                                <div class="col-sm-3">
                                    <select name="esex" class="selectpicker form-control">
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">身份证号码</label>
                                <div class="col-sm-3">
                                    <input name="pnum" type="text" class="form-control input-sm">
                                </div>
                                <label class="col-sm-2 col-sm-offset-1 control-label">联系电话</label>
                                <div class="col-sm-3">
                                    <input name="telephone" type="text" class="form-control input-sm">
                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <label class="col-sm-2 control-label">部门</label>
                            <div class="col-sm-3">
                                <select id="dept" name="dfk" class="selectpicker form-control">
                                    <option value="0">---选择部门--</option>

                                </select>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-offset-1 control-label">入职时间</label>
                                <div class="col-sm-3">
                                    <!--时间控件的id都不能改-->
                                    <input name="hiredate" id="start" class="laydate-icon form-control layer-date">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">年龄</label>
                                <div class="col-sm-3">
                                    <input name="eage" type="text" class="form-control input-sm">
                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">角色</label>
                                <div class="col-sm-9 roleList">

                                </div>

                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">备注</label>
                                <div class="col-sm-9">
                                    <textarea name="remark" class="form-control"></textarea>
                                </div>
                            </div>


                            <div class="row">
                                <div class="hr-line-dashed"></div>
                            </div>

                            <div class="row">
                                <div class="form-group">
                                    <div class="col-sm-3 col-sm-offset-3 text-right">
                                        <button type="button" class="btn btn-primary btnSave"><i class="fa fa-save"></i>
                                            保存内容
                                        </button>
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:history.back()" class="btn btn-white"><i
                                                class="fa fa-reply"></i> 返回</a>
                                    </div>
                                </div>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/plugins/select/bootstrap-select.min.js"></script>
<script src="js/plugins/layer/laydate/laydate.js"></script>
<script src="js/url.js"></script>
<script>
    $(document).ready(function () {
        // 设置按钮的样式
        $('.selectpicker').selectpicker('setStyle', 'btn-white');
        //初始化日期控件
        laydate({elem: "#start"});
        loadDept();


        function loadDept() {
            $.getJSON("/dept/list", function (response) {
                $(response).each(function () {
                    let $option = `<option value="` + this.deptno + `">` + this.dname + `</option>`;
                    $("#dept").append($option).selectpicker('refresh');
                });
                loadRole();
            })

        }

        //修改
        $(".btnSave").click(function () {
            let data = $("#dataForm").serialize();
            $.post("/employee/update", data, function (response) {
                if (response == "success") {
                    swal({
                            "title": "修改成功",
                            "text": "为您返回首页",
                            "type": "success"
                        },
                        function () {
                            location.href = "/list-employee.html";
                        });

                } else {
                    swal("添加失败", "请检查数据有效性...", "error");
                }
            }, "text");
        });

        //查
        function loadData() {
            let eid = getUrlParam("eid");
            $.getJSON("/employee/get", {"id": eid}, function (response) {
                $("input[name=eid]").val(response.eid);
                $("input[name=ename]").val(response.ename);
                $("input[name=username]").val(response.username);
                $("input[name=eage]").val(response.eage);
                $("input[name=telephone]").val(response.telephone);
                $("input[name=pnum]").val(response.pnum);
                $("input[name=hiredate]").val(response.hiredate);
                $("input[name=password]").val(response.password);
                $("textarea[name=remark]").val(response.remark);
                $("select[name=dfk]").selectpicker('val', response.dfk);
                $("select[name=esex]").selectpicker('val', response.esex);
                $(response.roles).each(function () {
                    $("input[type=checkbox][value="+this.role_fk+"]").prop("checked","checked");
                });
            });
        }


        function loadRole(){
            $.getJSON("/role/list",function (response) {
                $(response).each(function (i) {
                    $input = ` <input type="checkbox" name="roles[`+i+`].role_fk" value="`+this.roleid+`">`+this.rolename;
                    $(".roleList").append($input);
                });
                loadData();
            });

        }
    });
</script>
<!-- 修复日期控件长度-->
<link href="css/customer.css" rel="stylesheet">
</body>


</html>
    